<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paste Event Example</title>
</head>

<body>
    <input type="file" id="fileInput" />
    <div id="imageContainer"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取相关元素
            var fileInput = document.getElementById('fileInput');
            var imageContainer = document.getElementById('imageContainer');

            // 监听粘贴事件
            document.addEventListener('paste', function (event) {
                var items = (event.clipboardData || event.originalEvent.clipboardData).items;

                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        var blob = items[i].getAsFile();
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            // 展示图片
                            var img = new Image();
                            img.src = e.target.result;
                            imageContainer.appendChild(img);

                            // 在这里添加上传逻辑，将blob或base64数据上传到服务器
                            // 你可以使用XMLHttpRequest、Fetch API或其他方法进行上传
                            // 例如，可以使用FormData对象上传
                            // var formData = new FormData();
                            // formData.append('image', blob, 'image.png');
                            // 然后使用fetch或XMLHttpRequest发送formData
                        };

                        // 读取粘贴的图片数据
                        reader.readAsDataURL(blob);
                    }
                }
            });

            // 如果需要通过文件选择器上传图片，可以使用以下代码
            fileInput.addEventListener('change', function (event) {
                var file = event.target.files[0];
                var reader = new FileReader();

                reader.onload = function (e) {
                    // 展示图片
                    var img = new Image();
                    img.src = e.target.result;
                    imageContainer.appendChild(img);

                    // 在这里添加上传逻辑，将文件上传到服务器
                    // 你可以使用XMLHttpRequest、Fetch API或其他方法进行上传
                    // 例如，可以使用FormData对象上传
                    // var formData = new FormData();
                    // formData.append('image', file, file.name);
                    // 然后使用fetch或XMLHttpRequest发送formData
                };

                // 读取文件数据
                reader.readAsDataURL(file);
            });
        });
    </script>
    <script>
        // async function getClipboardContents() {
        //     try {
        //         const clipboardItems = await navigator.clipboard.read();
        //         for (const clipboardItem of clipboardItems) {
        //             for (const type of clipboardItem.types) {
        //                 const blob = await clipboardItem.getType(type);
        //                 console.log(URL.createObjectURL(blob));
        //             }
        //         }
        //     } catch (err) {
        //         console.error(err.name, err.message);
        //     }
        // }

        async function readClipboard() {
            try {
                const text = await navigator.clipboard.read();
                console.log('Clipboard content:', text);
            } catch (err) {
                console.error('无法读取剪切板内容：', err);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            readClipboard()
        })
    </script>
</body>

</html>